<template>
    <div class="home">

        <s-header></s-header>

        <side-bar></side-bar>

        <s-title :name="'首页'"></s-title>


      <ul id="chartByDate" class="chartByDate">

        <li>
          <span class="chartDateBtn text_info select" @click="selectWeek">最近一周</span>
        </li>

        <li class="chartDateBtn">
          <input class="chartDateInput" v-model="beginDate" type="date" title="开始日期"/>
          <span class="split">—</span>
          <input class="chartDateInput details_unit" v-model="endDate" type="date" title="结束日期"/>
        </li>

        <li>
          <button class="frm_btn" id="btn_chart_search" @click="searchData">查询</button>
        </li>

     </ul>

     <ul id="chartTotal" class="chartTotal">

        <li id="productTotal" class="productTotal">
          <p class="chartTotalTitle">
            <span class="chartTitleText">上架产品数量</span>
            <span class="chartTitleUnit">(单位：件)</span>
          </p>
          <span class="chartTotalValue">productTotal</span>
          <div class="chartTotalStyle" style="background-color: #f89e9e"></div>
        </li>

        <li id="userTotal" class="userTotal">
          <p class="chartTotalTitle">
            <span class="chartTitleText">注册用户数量</span>
            <span class="chartTitleUnit">(单位：人)</span>
          </p>
          <span class="chartTotalValue">userTotal</span>
          <div class="chartTotalStyle" style="background-color: #9ea7f5"></div>
        </li>

        <li id="orderTotal" class="orderTotal">
          <p class="chartTotalTitle">
            <span class="chartTitleText">成交订单数量</span>
            <span class="chartTitleUnit">(单位：件)</span>
          </p>
          <span class="chartTotalValue">orderTotal</span>
          <div class="chartTotalStyle" style="background-color: #ffdea4"></div>
        </li>

      </ul>

      <div id="chartDiv" ref="chartDiv" style="width: 100%; height: 500px"></div>
      <div v-if="loading" class="loader"></div>

    </div>
  </template>
  
  


<script setup>
import sHeader from '../components/SimpleHeader.vue'
import sideBar from '../components/SideBar.vue'
import sTitle from '../components/SimpleTitle.vue'
</script>




<style lang="less" scoped>
.home{
    width: 1200px;
    position: fixed;
    top: 130px;
    left: 300px;
    margin-top: 40px;
    margin-left:40px;
    .chartByDate {
        padding: 0;
        margin-bottom: 40px;

        li {
            // width: 400px;
            display: inline-block;
            list-style: none;

            .chartDateInput{
                color: #999;
                // height: 32px;
                cursor: pointer;
            }
        }

        .chartDateBtn {
            display: inline-block;
            padding: 5px 10px;
            color: #999;
            margin: 0 20px 0 0;
            border-radius: 3px;
            border: 1px solid #e9ebef;
            font-size: 20px;
            cursor: pointer;

            &.select {
                background: #70BBF4;
                border: 1px solid #70BBF4;
                color: white;
            }

            .chartDateInput {
                color: #999;
                outline: none;
                border: 0;
            }

            input[type=date]::-webkit-inner-spin-button {
                display: none
            }

            input[type=date]::-webkit-clear-button {
                display: none
            }
        }

        .frm_btn{
            padding: 5px 10px;
            font-size: 20px;
            background-color:#ff7874;
            border: 1px solid #ff7874;
            border-radius: 3px;
            color: white;
            cursor: pointer;
        }

    }

    .chartTotal {
        width: 100%;
        margin-bottom: 30px;
        padding: 0 20px;
        // padding: 0;

        li {
            // position: relative;
            // width: 30%;
            width: 300px;
            display: inline-block;
            list-style: none;
            padding: 0 40px;
            cursor: pointer;

            &.userTotal{
            width: 340px;
            border-left: 2px solid #eee;
         }

            &.productTotal{
                padding-left: 0;
            }

            &.orderTotal{
                border-left: 2px solid #eee;
                padding-right:0;
            }

            .chartTotalTitle {
            height: 20px;
            text-indent: 3px;

            .chartTitleText {
                float: left;
                font-weight: bold;
                font-size: 14px;
                color: #666;
            }

            .chartTitleUnit {
                float: right;
                font-weight: bold;
                font-size: 14px;
                color: #666;
            }
        }

        .chartTotalValue {
            // position: absolute;
            // left: 0;
            font-size: 28px;
            font-weight: bold;
            color: #666;
        }

        .chartTotalStyle {
            width: 100%;
            height: 6px;
            border-radius: 10px;
            margin-top: 10px;
        }
        }         
    }
}

</style>
